<header>
  <div class="farm">
    <ul class="farmList">
      <li class="farm-name">
        <!--<i></i>-->
        风场:
      </li>
      <li *ngFor="let farm of farms let i =index " [ngClass]="{active:farm.farmId==this.currentFarm.farmId}" (click)="onClickFarm(farm)">
        {{farm.farmName}}
      </li>
    </ul>
  </div>

  <div class="target">
    指标:
    <label class="form-label" *ngFor="let target of targets let i =index ">
      <span class="check-box">
        <input type="checkbox" [(ngModel)]="target.isChecked" (click)="onClickTarget($event.target,target)"> 
<span class="check"></span>
      </span>
      <span class="name">{{target.name}}</span>   
    </label>
  </div>

  
  <div class="time">
    <section>
      起始时间:
      <p-calendar [locale]="en" [(ngModel)]="starttime" showTime="showTime" hourFormat="24" [maxDate]="endtime"></p-calendar>
    </section>
    <section>
      结束时间:
      <p-calendar [locale]="en" [(ngModel)]="endtime" showTime="showTime" hourFormat="24" [minDate]="starttime"></p-calendar>
    </section>
  </div>
  <div class="search">
    <button (click)="onSearch()">查询</button>
  </div>


</header>
<main>
  <p-dataTable #dt 
  [value]="farmIndicators" 
  exportFilename="farmIndicators" 
  [(selection)]="selectedFarmIndicators" 
  selectionMode="multiple"
    [metaKeySelection]="false" 
    scrollable="true" 
    scrollHeight="600px">
    
    <p-header>
      <div class="title">
        <span>{{starttime | date: 'yyyy/MM/dd HH:mm'}} - {{endtime| date: 'yyyy/MM/dd HH:mm'}} 风场级动态指标列表</span>        
      </div>
    
    </p-header>
    <p-column field="name" header="风场"></p-column>

    <div *ngFor="let target of targets let i =index ">
      <p-column [field]="target.key" [header]="target.name" *ngIf="target.isChecked"></p-column>
    </div>
    
    <p-footer>
      <div class="ui-helper-clearfix">
        <button type="button" pButton icon="fa-file-o" iconPos="left" label="导出Excel" (click)="dt.exportCSV()" style="float:left"></button>
      </div>
    </p-footer>

  </p-dataTable>

  <div class="dialog" *ngIf="isShow">
    <div class="header">
      提示信息
    </div>
    <div class="main">
      {{message}}
    </div>
    <div class="footer">
      <button (click)="close()">确定</button>
    </div>
  </div>
</main>